// 获取页面元素
const form = document.querySelector('form')
const areaInput = document.getElementById('area')
const priceInput = document.getElementById('price')
const ratioInput = document.getElementById('ratio')
const yearsInput = document.getElementById('years')
const resultDiv = document.getElementById('result')

// 监听表单提交事件
form.addEventListener('submit', function (event) {
  // 阻止表单默认提交行为
  event.preventDefault()
  // console.log(areaInput)
  // 获取用户输入值
  // 思考：获取到的值需要先做数据转换吗？
  // 不需要，没有加法
  const area = areaInput.value
  const price = priceInput.value
  const ratio = ratioInput.value
  const years = yearsInput.value
  console.log(typeof area)
  console.log(typeof price)
  console.log(typeof ratio)
  console.log(typeof years)

  // 计算房屋总价、首付款、贷款金额、月供

  // 房屋总价公式 ： 房屋面积 * 房屋单价
  const allPrice = area * price
  // 首付款公式： 总价 * （1 - 按揭成数 / 10）
  const firstPay = allPrice * (1 - ratio / 10)
  // 贷款金额： 总价 * （按揭成数 / 10）
  const loan = allPrice * (ratio / 10)
  // 月供：贷款金额 / 总月数
  const month = years * 12
  const monthPay = loan / (years * 12)

  // 显示结果
  // 填入对应的结构
  resultDiv.innerHTML = `
  <div id="result">
        <p>房屋总价：${allPrice}元</p>
        <p>首付款：${firstPay}元</p>
        <p>贷款金额：${loan}元</p>
        <p>贷款年限：${years}年</p>
        <p>贷款月数：${month}个月</p>
        <p>月供：${monthPay}元/月</p>
      </div>`
})
